<template>
  <div>
    <ElForm inline ref="form" :model="queryCondition">
      <ElFormItem>
        <!-- <ElButton icon="Remove" @click="reset()"></ElButton> -->
        <ElButton icon="Search" type="primary" @click="queryByCondition(1)"> </ElButton>
        <ElButton icon="DocumentAdd" type="success" @click="open4Insert()"> </ElButton>
      </ElFormItem>
    </ElForm>
    <ElTable
      ref="table"
      :data="pageInfo.results"
      @selection-change="(rows: any) => (selected = rows)"
    >
      <ElTableColumn type="selection" width="64" />
      <!--   {
            "userId": "USE20240605000007",
            "nickName": "李四",
            "leaderId": "USE20240605000007",
            "menus": "1,5,2,4,6,7",
            "balance": 100.00,
            "pic": ""
        } -->
      <ElTableColumn prop="userId" label="UID"></ElTableColumn>
      <ElTableColumn prop="nickName" label="昵称"></ElTableColumn>
      <ElTableColumn prop="pic" label="相片"></ElTableColumn>
      <ElTableColumn label="相片" :align="'center'" width="160px">
        <template #default="{ row }">
          <img style="object-fit: contain; width: 100px" :src="picUrl(row)" alt="图片缺失" />
        </template>
      </ElTableColumn>

      <ElTableColumn prop="leaderId" label="部门主管"></ElTableColumn>
      <ElTableColumn prop="balance" label="余额"></ElTableColumn>
    </ElTable>
    <ElPagination
      background
      layout="prev, pager, next"
      :total="pageInfo.total"
      :page-size="queryCondition.pageSize"
      :current-page="queryCondition.pageNum"
      @current-change="queryByCondition"
    />
  </div>
</template>
<script lang="ts" setup>
import { UserInfo } from '@/entity/user.entity'

const pageInfo = reactive({
  total: 0,
  results: [] as Array<UserInfo>
})
const queryCondition = reactive({
  orderBy: '',
  uid: '',
  pageNum: 1,
  pageSize: 10
})
const selected = reactive([])
const queryByCondition = async (pageNum?: number) => {
  if (pageNum) {
    queryCondition.pageNum = pageNum
  }
  const res = await axios({
    method: 'post',
    url: '/userInfo/query',
    data: queryCondition
  })
  pageInfo.total = res.data.total
  pageInfo.results = res.data.results
}
const open4Insert = () => {}
onMounted(() => {
  queryByCondition(1)
})
// const picUrl = computed(() => {
//   return (row: UserInfo) => {
//     return import.meta.env.VITE_STATIC_RESOURCES + row.pic
//   }
// })
const picUrl = (row: UserInfo) => {
  if (row.pic) {
    return import.meta.env.VITE_STATIC_RESOURCES + row.pic
  } else {
    return '/favicon.ico'
  }
}
</script>
<style lang="scss" scoped></style>
